<template>
	<view :data-theme="theme" class="content" style="display: flex;flex-direction: column; height: 100%;">
		<!-- 搜索 -->
		<view class="bg_color" style="padding: 24rpx 24rpx;">
			<u-search v-model="tableForm.brandName" @custom="searchProduct" @search="searchProduct"
				placeholder="请输入品牌名称" actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"
				clearabled></u-search>
		</view>
		<scroll-view scroll-y="true" style="flex: 1; min-height: 10px;">
			<view class="list" v-show="this.tableData.data.length == 0">
				<view class="list-header">
					若无品牌请选择
				</view>
				<view class="content" v-for="(item,index) in noTableData.data" :key="item.id"
					@click="attureValue(item)">
					{{item.name}}
				</view>
			</view>

			<view class="list" v-if="this.tableData.data.length >= 1">
				<view class="list-header">搜索结果</view>
				<view class="content" v-for="(item,index) in tableData.data" :key="item.id" @click="attureValue(item)">
					{{item.name}}
					<u-divider></u-divider>
				</view>
			</view>

			<view v-if="loading">加载中...</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		brandlistApi
	} from '@/api/category.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				tableForm: {
					current: 1,
					size: 10,
				},
				tableData: {
					data: [],
				},
				noTableData: {
					data: [{
						name: '无品牌',
						id: 0,
					}],
				},
				brandData: {},
				otherAddBrand: {}, //新加类目的品牌
				data: {}, //传过来的值
				loading: false, // 加载更多
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			if (options) {
				this.data = JSON.parse(options.data);
			}

		},
		methods: {
			getList() {
				brandlistApi(this.tableForm).then((res) => {
					this.tableData.data = res.data.records;
				})
			},
			attureValue(setName) {
				if (this.data.ele == 1) {
					this.brandData.brandName = setName.name;
					this.brandData.brandId = setName.id;
					this.brandData.index = this.data.index;
					const pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
					const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
					uni.navigateBack({
						delta: 1,
						success: (res) => {
							prevPage.$vm.otherBrand(this.brandData) // 给上一页绑定方法otherFun,
						}
					});
					setTimeout(()=>{
						this.$router.go(-1); // 页面跳转放在异步操作完成后
					},200)
				} else {
					this.otherAddBrand.brandName = setName.name;
					this.otherAddBrand.brandId = setName.id;
					this.otherAddBrand.index = this.data.index;
					this.queryAddSort();
					setTimeout(()=>{
						this.$router.go(-1); // 页面跳转放在异步操作完成后
					},200)
				}
			},
			//页面跳转确认
			queryAddSort() {
				const pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
				uni.navigateBack({
					delta: 1,
					success: (res) => {
						if (this.data == 1) {
							uni.$emit('showMessageTherFun', this.otherAddBrand)
						} else {
							prevPage.$vm.otherAddBrand(this.otherAddBrand) // 给上一页绑定方法otherFun,
						}
					}
				});
			},
			//搜索
			searchProduct() {
				if (this.tableForm.brandName != '') {
					this.getList()
				} else {
					this.tableForm.size = 0;
					this.getList()
				}

			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.list-header {
		font-size: 34rpx;
		font-weight: bold;
		margin: 20rpx;
	}

	.list .content {
		margin: 20rpx;
		color: #000;
	}
</style>